<!--安检计划-->
<template>
  <div class="safety-plan-box">
    <div class="boxTitle">
      <PageTitle :text="title"></PageTitle>
    </div>
    <div class="query" :class="{'st':true,'sticky-fixed':isF}">
      <view class="uni-form-item uni-column">
        <input class="uni-input" v-model="formData.community" confirm-type="search" @confirm="onQuery" placeholder="请输入小区名称" />
        <view class="btn" @click="onQuery"><tui-icon name="search" size="20" color="#fff"></tui-icon>查询</view>
      </view>
    </div>
    <div class="listContent" v-if="!isData">
      <ListItem :list="dataList" type="safety"></ListItem>
      <tui-nomore v-if="pullUpOn" backgroundColor="#f2f2f2"></tui-nomore>
    </div>
    <div class="noDataBox" v-else>
      <img :src="noDataImgUrl" />
    </div>
    <!-- <FooterTel></FooterTel> -->
  </div>
</template>

<script>
import PageTitle from '../components/pageTitle.vue'
import FooterTel from '../components/footerTel.vue'
import ListItem from './component/listItem.vue'
export default {
  name: 'Detail',
  components: {
    PageTitle,
    FooterTel,
    ListItem
  },
  data () {
    return {
      title: null,
      formData: {
        community: '',
        pageNum: 1,
        pageSize: 20
      },
      dataList: [],
      dataTotal: 0,
      pullUpOn: false,
      noDataImgUrl: require('@/static/image/noData.png'),
      isData: false,
      // 下拉固定
      yuanH: uni.upx2px(0),
      isF: false,
    };
  },
  watch: {
    'formData.community': function (newValue, oldValue) {
      if (!newValue) {
        this.onQuery()
      }
    }
  },
  async onShow () {

  },
  async onLoad (e) {
    var vm = this;
    vm.title = e.title
  },
  created () { },
  methods: {
    onQuery () {
      var vm = this;
      vm.formData.pageNum = 1
      vm.dataTotal = 0
      vm.dataList = []
      vm.pullUpOn = false
      vm.getList()
    },
    getList () {
      var vm = this, list = []
      vm.tui.request('/api/securitycheckplan/list', 'POST', vm.formData, false, false, false).then((res) => {
        if (res.code == 200) {
          vm.dataList = vm.dataList.concat(res.data)
          vm.dataTotal = res.total
          vm.pullUpOn = vm.formData.pageNum >= Math.ceil(vm.dataTotal / vm.formData.pageSize) ? true : false;
          vm.isData = res.total >= 1 ? false : true
        }
      }).catch((e) => { })
    },
    previewImage (i, list) {
      this.func.previewImg(i, list)
    }
  },
  mounted () {
    var vm = this;
    vm.getList()
  },
  onReachBottom () {
    var vm = this;
    if (vm.pullUpOn) return
    vm.formData.pageNum = vm.formData.pageNum + 1
    vm.getList();
  },
  onPageScroll (e) {
    //#ifdef H5
    this.isF = true
    // #endif
    // #ifndef H5
    if (this.yuanH > e.scrollTop) {
      this.isF = false
    } else {
      this.isF = true
    }
    // #endif
  },
};
</script>

<style lang="scss" scoped>
@import "../../static/css/module.scss";
.safety-plan-box {
  width: 100%;
  height: calc(100% - 10px);
  padding-bottom: 10px;
  .boxTitle {
    padding: 10px 14px 0;
  }
  .listContent {
    padding: 0 14px;
  }
  .query {
    padding: 14px;
    .uni-form-item {
      position: relative;
      .uni-input {
        height: 40px;
        line-height: 40px;
        background: #fff;
        font-size: 15px;
        padding: 0 14px;
        border-radius: 8px;
      }
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        line-height: 38px;
        position: absolute;
        bottom: 1px;
        right: 1px;
        background: rgb(20, 98, 255);
        font-size: 15px;
        color: #fff;
        border-radius: 0 8px 8px 0;
        .tui-icon {
          padding-right: 4px;
        }
      }
    }
    .error {
      padding: 15px 0 0;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #f60;
      font-size: 15px;
      .tui-icon {
        padding-right: 4px;
      }
    }
  }
  .noDataBox {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 70%;
      margin: 50% auto 0;
    }
  }
  .st {
    // height: 90rpx;
    width: auto;
    background-color: #f2f2f2;
    z-index: 999;
    /* top: 300upx; */
  }
  .sticky-fixed {
    /* #ifdef H5 */
    position: sticky;
    top: 0;
    /* #endif */
    /* #ifndef H5 */
    position: fixed;
    top: 0;
    /* #endif */
    z-index: 999;
  }
}
</style>